<!DOCTYPE html>
<html lang="en">
<head>    
     
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
  <!-- Title -->   
  <title>Gift Oasis | Gift Shop</title>  

  <!-- Favicon -->
  

  <!-- Font-Awesome (CSS) -->
  <link rel="stylesheet" href="static/css/all.min.css">

  <!-- Swiper (CSS) -->
  <link rel="stylesheet" href="static/css/swiper-bundle.min.css">

  <!-- Custom Stylesheets -->
  <link rel="stylesheet" href="static/css/main.css">
  <link rel="stylesheet" href="static/css/responsive.css">

</head>
<body>

  <!-- ==================== Scroll-Top Area (Start) ==================== -->
  <a href="#" class="scroll-top">
    <i class="fas fa-long-arrow-alt-up"></i>
  </a>
  <!-- ==================== Scroll-Top Area (End) ==================== -->
    


<header class="header">
  <div class="header-2">

    <div id="menu-btn" class="icon fa-solid fa-bars-staggered"></div>

    <!-- == Logo == -->
    <a class="logo" href="index.html">
      <img src="static/picture/Logo.png" alt="logo">
      <div class="logo-name">
        <h3>礼物商城</h3>
      </div>
    </a>

    <div class="container">

      <!-- == Navbar == -->
      <nav class="navbar">

        <a class="nav-btn" href="index.html">首页</a>

        <div class="dropdown-menu">
          <button class="nav-btn"><a class="nav-btn" href="About.html">关于我们</a> </button>
          <div class="dropdown-content">

          </div>
        </div>

        <div class="dropdown-menu">
          <button class="nav-btn">登陆注册</a> <i
              class="fas fa-angle-down"></i> </button>
          <div class="dropdown-content">


            <a href="Login.html">login</a>
            <a href="Register.html">register</a>

          </div>
        </div>

        <div class="dropdown-menu">
          <button class="nav-btn"><a class="nav-btn" href="Categories.html">商品列表</a><i class="fas fa-angle-down"></i>
          </button>
          <div class="dropdown-content">
            <a href="Product-Single.html">商品详情</a>
            <a href="Cart.html">购物车</a>
            <a href="Order-Single.html">订单详情</a>
          </div>
        </div>

        <div class="dropdown-menu">
          <button class="nav-btn"><a class="nav-btn" href="Blog-Grid.html">新闻列表</a></button>
          <div class="dropdown-content">



          </div>
        </div>

        <a class="nav-btn" href="Contact.html">联系我们</a>

      </nav>

      <!-- == Icon Container == -->
      <div class="icon-container">
        <div id="search-btn" class="icon fa-solid fa-magnifying-glass"></div> <!-- Search Icon -->
        <a href="Login.html" id="login" class="icon fas fa-user"></a>
        <a href="Cart.html" id="cart"> <!-- Cart Page Link -->
          <i class="icon fas fa-shopping-cart"></i>
          <span class="badge">5</span> <!-- Cart Items Count (Badge) -->
        </a>
      </div>

      <!-- == Search Container == -->
      <form class="search-container">
        <input type="search" id="search-bar" placeholder="search here" required=""> <!-- Search Input -->
        <button type="submit"><i class="fas fa-search"></i></button> <!-- Submit Button -->
      </form>

    </div>

  </div>
  <!-- ===== Header-2 Area (End) ===== -->

  <!-- ===== Mobile Menu Area (Start) ===== -->
  <div class="mobile-menu">
  
    <nav class="mobile-navbar">
  
      <div class="nav-link">
        <div class="main-nav-link"> <a class="nav-btn" href="index.html">首页</a> </div>
      </div>
  
      <div class="nav-link">
        <div class="main-nav-link">
          <div class="nav-btn"><a href="About.html">关于我们</a></div></i>
        </div>
        <div class="sub-nav-link">
  
        </div>
      </div>
  
      <div class="nav-link">
        <div class="main-nav-link">
          <div class="nav-btn">登录注册</div> <i class="fas fa-plus"></i>
        </div>
        <div class="sub-nav-link">
          <a href="Login.html">login</a>
          <a href="Register.html">register</a>
        </div>
      </div>
  
      <div class="nav-link">
        <div class="main-nav-link">
          <div class="nav-btn"><a href="Categories.html">商品列表</a></div> <i class="fas fa-plus"></i>
        </div>
        <div class="sub-nav-link">
          <a href="Product-Single.html">商品详情</a>
          <a href="Cart.html">购物车</a>
          <a href="Order-Single.html">订单详情</a>
        </div>
      </div>
  
      <div class="nav-link">
        <div class="main-nav-link">
          <div class="nav-btn"><a href="Blog-Grid.html">新闻列表</a></div>
        </div>
      </div>
  
      <div class="nav-link">
        <div class="main-nav-link"> <a class="nav-btn" href="Contact.html">关于我们</a> </div>
      </div>
  
    </nav>
  
  </div>
  <!-- ===== Mobile Menu Area (End) ===== -->

</header>

  <!-- ==================== Home-Slider Area (Start) ==================== -->  
  <section class="home">

    <!-- Gift Shop Slider -->
    <div class="swiper-container home-slider">
  
      <div class="swiper-wrapper">
  
        <!-- Slide 1 -->
        <div class="swiper-slide home-item">
          <img src="static/picture/Home-1.jpg" alt="Home-Image">
          <div class="content">
            <div class="text">
              <h3>特殊时刻和庆典的礼物</h3> <!-- Slide 1 Title -->
              <p>在我们的礼品店探索周到和独特的礼物。无论在什么场合，都要为你爱的人挑选一份完美的礼物。</p> <!-- Slide 1 Description -->
              <a href="Shop-Grid.html" class="btn">去购买</a> <!-- Shop Now Button -->
            </div>
          </div>
        </div>
  
        <!-- Slide 2 -->
        <div class="swiper-slide home-item">
          <img src="static/picture/Home-2.jpg" alt="Home-Image">
          <div class="content">
            <div class="text">
              <h3>每个场合的礼物和更多</h3> <!-- Slide 2 Title -->
              <p>发现各种各样的礼物，为你关心的人带来快乐和微笑。</p> <!-- Slide 2 Description -->
              <a href="Shop-Grid.html" class="btn">去购买</a> <!-- Shop Now Button -->
            </div>
          </div>
        </div>
  
        <!-- Slide 3 -->
        <div class="swiper-slide home-item">
          <img src="static/picture/Home-3.jpg" alt="Home-Image">
          <div class="content">
            <div class="text">
              <h3>带来快乐和快乐的礼物</h3> <!-- Slide 3 Title -->
              <p>在我们的礼品店寻找完美的礼物来庆祝生活中的特殊场合。</p> <!-- Slide 3 Description -->
              <a href="Shop-Grid.html" class="btn">去购买</a> <!-- Shop Now Button -->
            </div>
          </div>
        </div>
  
      </div>
  
      <!-- Home Slider Pagination -->
      <div class="swiper-pagination swiper-pagination1"></div>
  
      <!-- Home Slider Navigation arrows -->
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
  
    </div>
  
  </section>  
  <!-- ==================== Home-Slider Area (End) ==================== -->     



  <!-- ==================== Features Area (Start) =================== -->
  <section class="features">

    <div class="box-container">
  
      <!-- Feature 1 - Fast & Free Delivery -->
      <div class="feature-item">
        <i class="fas fa-shipping-fast"></i>
        <h3>快速免费送货</h3>
        <p>适用于订单超过99%</p>
      </div>
  
      <!-- Feature 2 - 100% Satisfaction -->
      <div class="feature-item">
        <i class="far fa-smile"></i>
        <h3>100% 满意度</h3>
        <p>客户支持全天候服务</p>
      </div>
  
      <!-- Feature 3 - Return Exchange -->
      <div class="feature-item">
        <i class="fas fa-hand-holding-usd"></i>
        <h3>退货换货</h3>
        <p>100%退款保证</p>
      </div>
  
      <!-- Feature 4 - Save 10% with Credit Card -->
      <div class="feature-item">
        <i class="far fa-credit-card"></i>
        <h3>节省10%</h3>
        <p>使用银行卡支付</p>
      </div>
  
    </div>
  
  </section>  
  <!-- ==================== Features Area (End) ==================== -->



  <!-- ==================== Categories Area (Start) ==================== -->
  <section class="product-categories">

    <!-- Section Heading -->
    <div class="heading">  
      <span>我们的特色产品</span>
      <h2>产品分类</h2>   
    </div>

    <!-- Home Slider -->
    <div class="swiper-container category-slider">
      <div class="swiper-wrapper">

        <!-- Category-1: Home Decor -->
        <a href="Shop-Grid.html" class="swiper-slide category-item">
          <img src="static/picture/Category-1.jpg" alt="Category-Image"> <!-- Category Image -->
          <div class="content">
            <h3>家居装饰</h3> <!-- Category Title -->
            <p>8 Products</p> <!-- Category Products Count -->
          </div>
        </a>

        <!-- Category-2: Jewelry -->
        <a href="Shop-Grid.html" class="swiper-slide category-item">
          <img src="static/picture/Category-2.jpg" alt="Category-Image"> <!-- Category Image -->
          <div class="content">
            <h3>珠宝</h3> <!-- Category Title -->
            <p>6 Products</p> <!-- Category Products Count -->
          </div>
        </a>

        <!-- Category-3: Stationery -->
        <a href="Shop-Grid.html" class="swiper-slide category-item">
          <img src="static/picture/Category-3.jpg" alt="Category-Image"> <!-- Category Image -->
          <div class="content">
            <h3>文具</h3> <!-- Category Title -->
            <p>4 Products</p> <!-- Category Products Count -->
          </div>
        </a>

        <!-- Category-4: Toys and Games -->
        <a href="Shop-Grid.html" class="swiper-slide category-item">
          <img src="static/picture/Category-4.jpg" alt="Category-Image"> <!-- Category Image -->
          <div class="content">
            <h3>玩具</h3> <!-- Category Title -->
            <p>6 Products</p> <!-- Category Products Count -->
          </div>
        </a>
        
        <!-- Category-5: Fashion Accessories -->
        <a href="Shop-Grid.html" class="swiper-slide category-item">
          <img src="static/picture/Category-5.jpg" alt="Category-Image"> <!-- Category Image -->
          <div class="content">
            <h3>时尚配饰</h3> <!-- Category Title -->
            <p>7 Products</p> <!-- Category Products Count -->
          </div>
        </a>

        <!-- Category-6: Food and Beverages -->
        <a href="Shop-Grid.html" class="swiper-slide category-item">
          <img src="static/picture/Category-6.jpg" alt="Category-Image"> <!-- Category Image -->
          <div class="content">
            <h3>零食</h3> <!-- Category Title -->
            <p>9 Products</p> <!-- Category Products Count -->
          </div>
        </a>

        <!-- Category-7: Care Products -->
        <a href="Shop-Grid.html" class="swiper-slide category-item">
          <img src="static/picture/Category-7.jpg" alt="Category-Image"> <!-- Category Image -->
          <div class="content">
            <h3>护理产品</h3> <!-- Category Title -->
            <p>9 Products</p> <!-- Category Products Count -->
          </div>
        </a>

        <!-- Category-8: Handmade Crafts -->
        <a href="Shop-Grid.html" class="swiper-slide category-item">
          <img src="static/picture/Category-8.jpg" alt="Category-Image"> <!-- Category Image -->
          <div class="content">
            <h3>手工艺品</h3> <!-- Category Title -->
            <p>10 Products</p> <!-- Category Products Count -->
          </div>
        </a>

      </div>
    </div>

  </section>
  <!-- ==================== Categories Area (End) ==================== -->



  <!-- ==================== Count Area (Start) ==================== -->
  <div class="counting">

    <!-- Statistic Box 1: Unique Gifts Available Count -->
    <div class="box">
      <div class="info">
        <i class="fas fa-gift"></i> <!-- Gift box icon -->
        <div class="content">
          <h1 class="count" data-count="1000">1000+</h1> <!-- Count of unique gifts available -->
          <h3>Gifts</h3> <!-- Statistic description -->
        </div>
      </div>
    </div>
  
    <!-- Statistic Box 2: Happy Customers Count -->
    <div class="box">
      <div class="info">
        <i class="far fa-smile"></i> <!-- Smiling face icon -->
        <div class="content">
          <h1 class="count" data-count="500">500+</h1> <!-- Count of happy customers -->
          <h3>Customers</h3> <!-- Statistic description -->
        </div>
      </div>
    </div>
  
    <!-- Statistic Box 3: Orders Delivered Count -->
    <div class="box">
      <div class="info">
        <i class="fas fa-truck"></i> <!-- Delivery truck icon -->
        <div class="content">
          <h1 class="count" data-count="2000">2000+</h1> <!-- Count of orders delivered -->
          <h3>Orders</h3> <!-- Statistic description -->
        </div>
      </div>
    </div>
  
    <!-- Statistic Box 4: Dedicated Team Members Count -->
    <div class="box">
      <div class="info">
        <i class="fas fa-users"></i> <!-- Users icon -->
        <div class="content">
          <h1 class="count" data-count="30">30+</h1> <!-- Count of dedicated team members -->
          <h3>Team Members</h3> <!-- Statistic description -->
        </div>
      </div>
    </div>
  
  </div>
  <!-- ==================== Count Area (End) ==================== -->



  <!-- ==================== About Area (Start) ==================== -->
  <section class="about"> 

    <!-- About Information -->
    <div class="box-container"> 
  
      <!-- About Image -->
      <div class="image">
        <div class="sub-image one">
          <img src="static/picture/About-1.jpg" alt="About-Image1">
        </div>
        <div class="sub-image two">
          <img src="static/picture/About-2.jpg" alt="About-Image2">
          <img src="static/picture/About-3.jpg" alt="About-Image3">
        </div>
      </div>
  
      <!-- About Content -->
      <div class="content"> 

        <div class="heading"> 
          <span>关于我们</span> <!-- Sub Heading -->
          <h2>受欢迎的礼物送到你的目的地</h2> <!-- Main Heading -->
        </div>
      
      <p>在礼物商城，我们致力于送礼物的艺术，让每一个场合都变得特别。Lorem ipsum dolor是一个连续的服务精英。</p>
        <!-- Key Features -->
        <ul class="features"> 
            <li><i class="fa-solid fa-gift"></i><span>策划独特的礼物选择</span></li> <!-- Feature 1 -->
            <li><i class="fa-solid fa-gift"></i><span>给礼物带来快乐</span></li> <!-- Feature 2 -->
            <li><i class="fa-solid fa-gift"></i><span>个性化礼品方案</span></li> <!-- Feature 3 -->
            <li><i class="fa-solid fa-gift"></i><span>通过礼物传递快乐</span></li> <!-- Feature 4 -->
        </ul> 
      
        <a href="About.html" class="btn">了解更多</a>
      
      </div>
      

    </div> 

  </section> 
  <!-- ==================== About Area (End) ==================== -->



  <!-- ==================== Services Area (Start) ==================== -->
  <section class="services">

    <!-- Section Heading -->
    <div class="heading">  
      <span>我们提供什么</span>
      <h2>我们的服务</h2>   
    </div>

    <!-- Service Slider -->
    <div class="swiper-container service-slider">
      <div class="swiper-wrapper">

        <!-- Service 1: Gift Selection -->
        <div class="swiper-slide service-item">
          <img src="static/picture/Service-1.jpg" alt="Service-Image"> <!-- Service Image -->
          <div class="content">
            <i class="fa-solid fa-gifts"></i> <!-- Gift Icon -->
            <a href="Service-Single.html"><h3>礼物的选择</h3></a> <!-- Service Title -->
            <p>在我们的礼品店里，你可以找到各种各样的贴心而独特的礼物。找到适合任何场合的完美礼物。</p> <!-- Service Description -->
          </div>
        </div>

        <!-- Service 2: Gift Wrapping -->
        <div class="swiper-slide service-item">
          <img src="static/picture/Service-2.jpg" alt="Service-Image"> <!-- Service Image -->
          <div class="content">
            <i class="fa-solid fa-gift"></i> <!-- Gift Wrap Icon -->
            <a href="Service-Single.html"><h3>礼物包装</h3></a> <!-- Service Title -->
            <p>让我们用我们专业的礼品包装服务为您的礼物添加完美的点睛之笔。让你的礼物与众不同.</p> <!-- Service Description -->
          </div>
        </div>

        <!-- Service 3: Customization -->
        <div class="swiper-slide service-item">
          <img src="static/picture/Service-3.jpg" alt="Service-Image"> <!-- Service Image -->
          <div class="content">
            <i class="fa-solid fa-paintbrush"></i> <!-- Paintbrush Icon -->
            <a href="Service-Single.html"><h3>定制</h3></a> <!-- Service Title -->
            <p>用定制选项个性化您的礼物，创造独一无二的礼物，真正反映您的情感和风格。</p> <!-- Service Description -->
          </div>
        </div>

        <!-- Service 4: Delivery and Shipping -->
        <div class="swiper-slide service-item">
          <img src="static/picture/Service-4.jpg" alt="Service-Image"> <!-- Service Image -->
          <div class="content">
            <i class="fa-solid fa-truck-fast"></i> <!-- Fast Delivery Icon -->
            <a href="Service-Single.html"><h3>交货及运输</h3></a> <!-- Service Title -->
            <p>享受无忧的送货和运输服务，为您的礼品购买，确保您的礼物到达目的地安全，及时。</p> <!-- Service Description -->
          </div>
        </div>
      </div>
    </div>

  </section>
  <!-- ==================== Services Area (End) ==================== -->






  <!-- ==================== Products Area (Start) ==================== -->
  <section class="products">

    <div class="heading">
      <span>我们的顶级产品</span>
      <h2>当前流行的、受欢迎的产品</h2>
    </div>

    <div class="content">

      <div class="tab-buttons">

        <button type="button" class="button active" data-target="#latest">最近的</button>
        <button type="button" class="button btn" data-target="#featured">特色</button>
        <button type="button" class="button btn" data-target="#Best-Seller">畅销唱片</button> 

      </div>

      <div class="product-gallery active" id="latest">

        <!-- Product Slider -->
        <div class="swiper-container product-slider">
          <div class="swiper-wrapper">

            <!-- Product-1 -->
            <div class="swiper-slide product-item">
              <div class="image">
                <img src="static/picture/Product-1.jpg" alt="Product-Image"> <!-- Product Image -->
                <div class="options">
                  <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
                  <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
                  <a href="Product-Single.html" class="icon"><i class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
                </div>
              </div>
              <div class="content">
                <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price -->
                <a href="Product-Single.html"><h3>handbag</h3></a> <!-- Product Title -->
                <!-- Product Rating -->
                <div class="rating">
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                </div> 
              </div>
            </div>
          
            <!-- Product-2 -->
            <div class="swiper-slide product-item">
              <div class="image">
                <img src="static/picture/Product-2.jpg" alt="Product-Image"> <!-- Product Image -->
                <div class="options">
                  <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
                  <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
                  <a href="Product-Single.html" class="icon"><i class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
                </div>
              </div>
              <div class="content">
                <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price -->
                <a href="Product-Single.html"><h3>rings</h3></a> <!-- Product Title -->
                <!-- Product Rating -->
                <div class="rating">
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                </div> 
              </div>
            </div>
          
            <!-- Product-3 -->
            <div class="swiper-slide product-item">
              <div class="image">
                <img src="static/picture/Product-3.jpg" alt="Product-Image"> <!-- Product Image -->
                <div class="options">
                  <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
                  <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
                  <a href="Product-Single.html" class="icon"><i class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
                </div>
              </div>
              <div class="content">
                <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price -->
                <a href="Product-Single.html"><h3>Candles</h3></a> <!-- Product Title -->
                <!-- Product Rating -->
                <div class="rating">
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                </div> 
              </div>
            </div>
          
            <!-- Product-4 -->
            <div class="swiper-slide product-item">
              <div class="image">
                <img src="static/picture/Product-4.jpg" alt="Product-Image"> <!-- Product Image -->
                <div class="options">
                  <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
                  <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
                  <a href="Product-Single.html" class="icon"><i class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
                </div>
              </div>
              <div class="content">
                <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price -->
                <a href="Product-Single.html"><h3>Picture frames</h3></a> <!-- Product Title -->
                <!-- Product Rating -->
                <div class="rating">
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                </div> 
              </div>
            </div>

            <!-- Product-5 -->
            <div class="swiper-slide product-item">
              <div class="image">
                <img src="static/picture/Product-5.jpg" alt="Product-Image"> <!-- Product Image -->
                <div class="options">
                  <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
                  <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
                  <a href="Product-Single.html" class="icon"><i class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
                </div>
              </div>
              <div class="content">
                <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price -->
                <a href="Product-Single.html"><h3>necklace</h3></a> <!-- Product Title -->
                <!-- Product Rating -->
                <div class="rating">
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                </div> 
              </div>
            </div>
          
            <!-- Product-6 -->
            <div class="swiper-slide product-item">
              <div class="image">
                <img src="static/picture/Product-6.jpg" alt="Product-Image"> <!-- Product Image -->
                <div class="options">
                  <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
                  <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
                  <a href="Product-Single.html" class="icon"><i class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
                </div>
              </div>
              <div class="content">
                <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price -->
                <a href="Product-Single.html"><h3>greeting card</h3></a> <!-- Product Title -->
                <!-- Product Rating -->
                <div class="rating">
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                </div> 
              </div>
            </div>

            <!-- Product-7 -->
            <div class="swiper-slide product-item">
              <div class="image">
                <img src="static/picture/Product-7.jpg" alt="Product-Image"> <!-- Product Image -->
                <div class="options">
                  <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
                  <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
                  <a href="Product-Single.html" class="icon"><i class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
                </div>
              </div>
              <div class="content">
                <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price -->
                <a href="Product-Single.html"><h3>greeting card</h3></a> <!-- Product Title -->
                <!-- Product Rating -->
                <div class="rating">
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                </div> 
              </div>
            </div>

            <!-- Product-8 -->
            <div class="swiper-slide product-item">
              <div class="image">
                <img src="static/picture/Product-8.jpg" alt="Product-Image"> <!-- Product Image -->
                <div class="options">
                  <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
                  <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
                  <a href="Product-Single.html" class="icon"><i class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
                </div>
              </div>
              <div class="content">
                <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price -->
                <a href="Product-Single.html"><h3>greeting card</h3></a> <!-- Product Title -->
                <!-- Product Rating -->
                <div class="rating">
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                </div> 
              </div>
            </div>

          </div>
        </div>

      </div>

      <div class="product-gallery" id="featured">

        <!-- Product Slider -->
        <div class="swiper-container product-slider">
          <div class="swiper-wrapper">
          
            <!-- Product-1 -->
            <div class="swiper-slide product-item">
              <div class="image">
                <img src="static/picture/Product-4.jpg" alt="Product-Image"> <!-- Product Image -->
                <div class="options">
                  <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
                  <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
                  <a href="Product-Single.html" class="icon"><i class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
                </div>
              </div>
              <div class="content">
                <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price -->
                <a href="Product-Single.html"><h3>Picture frames</h3></a> <!-- Product Title -->
                <!-- Product Rating -->
                <div class="rating">
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                </div> 
              </div>
            </div>

            <!-- Product-2 -->
            <div class="swiper-slide product-item">
              <div class="image">
                <img src="static/picture/Product-5.jpg" alt="Product-Image"> <!-- Product Image -->
                <div class="options">
                  <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
                  <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
                  <a href="Product-Single.html" class="icon"><i class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
                </div>
              </div>
              <div class="content">
                <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price -->
                <a href="Product-Single.html"><h3>necklace</h3></a> <!-- Product Title -->
                <!-- Product Rating -->
                <div class="rating">
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                </div> 
              </div>
            </div>
          
            <!-- Product-3 -->
            <div class="swiper-slide product-item">
              <div class="image">
                <img src="static/picture/Product-6.jpg" alt="Product-Image"> <!-- Product Image -->
                <div class="options">
                  <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
                  <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
                  <a href="Product-Single.html" class="icon"><i class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
                </div>
              </div>
              <div class="content">
                <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price -->
                <a href="Product-Single.html"><h3>greeting card</h3></a> <!-- Product Title -->
                <!-- Product Rating -->
                <div class="rating">
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                </div> 
              </div>
            </div>

            <!-- Product-4 -->
            <div class="swiper-slide product-item">
              <div class="image">
                <img src="static/picture/Product-7.jpg" alt="Product-Image"> <!-- Product Image -->
                <div class="options">
                  <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
                  <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
                  <a href="Product-Single.html" class="icon"><i class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
                </div>
              </div>
              <div class="content">
                <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price -->
                <a href="Product-Single.html"><h3>notebooks</h3></a> <!-- Product Title -->
                <!-- Product Rating -->
                <div class="rating">
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                </div> 
              </div>
            </div>

            <!-- Product-5 -->
            <div class="swiper-slide product-item">
              <div class="image">
                <img src="static/picture/Product-8.jpg" alt="Product-Image"> <!-- Product Image -->
                <div class="options">
                  <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
                  <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
                  <a href="Product-Single.html" class="icon"><i class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
                </div>
              </div>
              <div class="content">
                <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price -->
                <a href="Product-Single.html"><h3>Jigsaw puzzle</h3></a> <!-- Product Title -->
                <!-- Product Rating -->
                <div class="rating">
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                </div> 
              </div>
            </div>

            <!-- Product-6 -->
            <div class="swiper-slide product-item">
              <div class="image">
                <img src="static/picture/Product-9.jpg" alt="Product-Image"> <!-- Product Image -->
                <div class="options">
                  <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
                  <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
                  <a href="Product-Single.html" class="icon"><i class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
                </div>
              </div>
              <div class="content">
                <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price -->
                <a href="Product-Single.html"><h3>Lotion</h3></a> <!-- Product Title -->
                <!-- Product Rating -->
                <div class="rating">
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                </div> 
              </div>
            </div>

            <!-- Product-7 -->
            <div class="swiper-slide product-item">
              <div class="image">
                <img src="static/picture/Product-1.jpg" alt="Product-Image"> <!-- Product Image -->
                <div class="options">
                  <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
                  <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
                  <a href="Product-Single.html" class="icon"><i class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
                </div>
              </div>
              <div class="content">
                <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price -->
                <a href="Product-Single.html"><h3>handbag</h3></a> <!-- Product Title -->
                <!-- Product Rating -->
                <div class="rating">
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                </div> 
              </div>
            </div>
          
            <!-- Product-8 -->
            <div class="swiper-slide product-item">
              <div class="image">
                <img src="static/picture/Product-2.jpg" alt="Product-Image"> <!-- Product Image -->
                <div class="options">
                  <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
                  <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
                  <a href="Product-Single.html" class="icon"><i class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
                </div>
              </div>
              <div class="content">
                <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price -->
                <a href="Product-Single.html"><h3>rings</h3></a> <!-- Product Title -->
                <!-- Product Rating -->
                <div class="rating">
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                </div> 
              </div>
            </div>

          </div>
        </div>

      </div>

      <div class="product-gallery" id="Best-Seller">

        <!-- Product Slider -->
        <div class="swiper-container product-slider">
          <div class="swiper-wrapper">

            <!-- Product-1 -->
            <div class="swiper-slide product-item">
              <div class="image">
                <img src="static/picture/Product-7.jpg" alt="Product-Image"> <!-- Product Image -->
                <div class="options">
                  <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
                  <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
                  <a href="Product-Single.html" class="icon"><i class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
                </div>
              </div>
              <div class="content">
                <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price -->
                <a href="Product-Single.html"><h3>notebooks</h3></a> <!-- Product Title -->
                <!-- Product Rating -->
                <div class="rating">
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                </div> 
              </div>
            </div>

            <!-- Product-2 -->
            <div class="swiper-slide product-item">
              <div class="image">
                <img src="static/picture/Product-8.jpg" alt="Product-Image"> <!-- Product Image -->
                <div class="options">
                  <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
                  <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
                  <a href="Product-Single.html" class="icon"><i class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
                </div>
              </div>
              <div class="content">
                <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price -->
                <a href="Product-Single.html"><h3>jigsaw puzzle</h3></a> <!-- Product Title -->
                <!-- Product Rating -->
                <div class="rating">
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                </div> 
              </div>
            </div>

            <!-- Product-3 -->
            <div class="swiper-slide product-item">
              <div class="image">
                <img src="static/picture/Product-9.jpg" alt="Product-Image"> <!-- Product Image -->
                <div class="options">
                  <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
                  <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
                  <a href="Product-Single.html" class="icon"><i class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
                </div>
              </div>
              <div class="content">
                <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price -->
                <a href="Product-Single.html"><h3>lotion</h3></a> <!-- Product Title -->
                <!-- Product Rating -->
                <div class="rating">
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                </div> 
              </div>
            </div>

            <!-- Product-4 -->
            <div class="swiper-slide product-item">
              <div class="image">
                <img src="static/picture/Product-1.jpg" alt="Product-Image"> <!-- Product Image -->
                <div class="options">
                  <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
                  <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
                  <a href="Product-Single.html" class="icon"><i class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
                </div>
              </div>
              <div class="content">
                <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price -->
                <a href="Product-Single.html"><h3>handbag</h3></a> <!-- Product Title -->
                <!-- Product Rating -->
                <div class="rating">
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                </div> 
              </div>
            </div>
          
            <!-- Product-5 -->
            <div class="swiper-slide product-item">
              <div class="image">
                <img src="static/picture/Product-2.jpg" alt="Product-Image"> <!-- Product Image -->
                <div class="options">
                  <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
                  <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
                  <a href="Product-Single.html" class="icon"><i class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
                </div>
              </div>
              <div class="content">
                <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price -->
                <a href="Product-Single.html"><h3>rings</h3></a> <!-- Product Title -->
                <!-- Product Rating -->
                <div class="rating">
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                </div> 
              </div>
            </div>
          
            <!-- Product-6 -->
            <div class="swiper-slide product-item">
              <div class="image">
                <img src="static/picture/Product-3.jpg" alt="Product-Image"> <!-- Product Image -->
                <div class="options">
                  <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
                  <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
                  <a href="Product-Single.html" class="icon"><i class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
                </div>
              </div>
              <div class="content">
                <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price -->
                <a href="Product-Single.html"><h3>Candles</h3></a> <!-- Product Title -->
                <!-- Product Rating -->
                <div class="rating">
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                </div> 
              </div>
            </div>
          
            <!-- Product-7 -->
            <div class="swiper-slide product-item">
              <div class="image">
                <img src="static/picture/Product-4.jpg" alt="Product-Image"> <!-- Product Image -->
                <div class="options">
                  <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
                  <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
                  <a href="Product-Single.html" class="icon"><i class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
                </div>
              </div>
              <div class="content">
                <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price -->
                <a href="Product-Single.html"><h3>Picture frames</h3></a> <!-- Product Title -->
                <!-- Product Rating -->
                <div class="rating">
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                </div> 
              </div>
            </div>

            <!-- Product-8 -->
            <div class="swiper-slide product-item">
              <div class="image">
                <img src="static/picture/Product-5.jpg" alt="Product-Image"> <!-- Product Image -->
                <div class="options">
                  <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
                  <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
                  <a href="Product-Single.html" class="icon"><i class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
                </div>
              </div>
              <div class="content">
                <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price -->
                <a href="Product-Single.html"><h3>necklace</h3></a> <!-- Product Title -->
                <!-- Product Rating -->
                <div class="rating">
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                  <i class="fa-solid fa-star"></i>
                </div> 
              </div>
            </div>

          </div>
        </div>

      </div>

    </div>

  </section>
  <!-- ==================== Products Area (End) ==================== -->



  <!-- ==================== Offers Area (Start) ==================== -->
  <section class="offers">

    <!-- Offer 1 -->
    <div class="offer-item">
      <img src="static/picture/Offer-1.jpg" alt="Offer-Image"> <!-- Offer Image -->
      <div class="content">
        <p>upto 50% off</p> <!-- Offer Description -->
        <h3>时尚配饰</h3> <!-- Offer Heading-->
        <a href="Shop-Grid.html" class="btn">去购买</a> <!-- Shop Now Button -->
      </div>
    </div>

    <!-- Offer 2 -->
    <div class="offer-item">
      <img src="static/picture/Offer-2.jpg" alt="Offer-Image"> <!-- Offer Image -->
      <div class="content">
        <p>new arrival</p> <!-- Offer Description -->
        <h3>时尚家居装饰</h3> <!-- Offer Heading-->
        <a href="Shop-Grid.html" class="btn">去购买</a> <!-- Shop Now Button -->
      </div>
    </div>

  </section>
  <!-- ==================== Offers Area (End) ==================== --> 






  <!-- ==================== Blogs Area (Start) ==================== -->
  <section class="blog main">

    <!-- Section Heading -->
    <div class="heading"> 
      <span>我们的最新动态</span>
      <h2>新闻列表</h2> 
    </div>
  
    <!-- Latest Blogs -->
    <div class="box-container">

        <!-- Blog-1 -->
        <div class="blog-item"> 
          <div class="image">
            <img src="static/picture/Blog-1.jpg" alt="Blog-Image"> <!-- Blog Image -->
            <div class="date">15 oct</div> <!-- Blog Date -->
          </div>
          <div class="content">
            <a class="main-heading" href="Blog-Single.html">每个场合的个性化礼品选择</a> <!-- Blog Title -->
            <div class="details">
              <h3><i class="fa-solid fa-user"></i><span>管理员</span></h3> <!-- Author -->
              <h3><i class="fa-regular fa-folder-open"></i><span>Personalized Gifts</span></h3> <!-- Category -->
            </div>
          </div>
        </div>

        <!-- Blog-2 -->
        <div class="blog-item"> 
          <div class="image">
            <img src="static/picture/Blog-2.jpg" alt="Blog-Image"> <!-- Blog Image -->
            <div class="date">02 Oct</div> <!-- Blog Date -->
          </div>
          <div class="content">
            <a class="main-heading" href="Blog-Single.html">探索最新的季节礼物趋势</a> <!-- Blog Title -->
            <div class="details">
              <h3><i class="fa-solid fa-user"></i><span>管理员</span></h3> <!-- Author -->
              <h3><i class="fa-regular fa-folder-open"></i><span>Seasonal Gifts</span></h3> <!-- Category -->
            </div>
          </div>
        </div>

        <!-- Blog-3 -->
        <div class="blog-item"> 
          <div class="image">
            <img src="static/picture/Blog-3.jpg" alt="Blog-Image"> <!-- Blog Image -->
            <div class="date">20 sep</div> <!-- Blog Date -->
          </div>
          <div class="content">
            <a class="main-heading" href="Blog-Single.html">掌握礼品包装的艺术</a> <!-- Blog Title -->
            <div class="details">
              <h3><i class="fa-solid fa-user"></i><span>By Admin</span></h3> <!-- Author -->
              <h3><i class="fa-regular fa-folder-open"></i><span>Gifts Wrapping</span></h3> <!-- Category -->
            </div>
          </div>
        </div>

    </div>
  
  </section>
  <!-- ==================== Blogs Area (End) ==================== -->

  

  <!-- ==================== Partners Area (Start) ==================== -->
  <section class="partners">
  
    <!-- Partner Slider Container -->
    <div class="swiper-container partner-slider">

      <!-- Partners Logo -->
      <div class="swiper-wrapper">
        <div class="swiper-slide partner-item"><a href="#"><img src="static/picture/Partner-1.png" alt="Partner-Logo"></a></div>
        <div class="swiper-slide partner-item"><a href="#"><img src="static/picture/Partner-2.png" alt="Partner-Logo"></a></div>
        <div class="swiper-slide partner-item"><a href="#"><img src="static/picture/Partner-3.png" alt="Partner-Logo"></a></div>
        <div class="swiper-slide partner-item"><a href="#"><img src="static/picture/Partner-4.png" alt="Partner-Logo"></a></div>
        <div class="swiper-slide partner-item"><a href="#"><img src="static/picture/Partner-5.png" alt="Partner-Logo"></a></div>
        <div class="swiper-slide partner-item"><a href="#"><img src="static/picture/Partner-6.png" alt="Partner-Logo"></a></div>
        <div class="swiper-slide partner-item"><a href="#"><img src="static/picture/Partner-1.png" alt="Partner-Logo"></a></div>
        <div class="swiper-slide partner-item"><a href="#"><img src="static/picture/Partner-2.png" alt="Partner-Logo"></a></div>
        <div class="swiper-slide partner-item"><a href="#"><img src="static/picture/Partner-3.png" alt="Partner-Logo"></a></div>
        <div class="swiper-slide partner-item"><a href="#"><img src="static/picture/Partner-4.png" alt="Partner-Logo"></a></div>
      </div>
    </div> 

  </section>
  <!-- ==================== Partners Area Area (End) ==================== -->



  <!-- ==================== Newsletter Area (Start) ==================== -->
  <section class="newsletter-subscribe">
    <div class="content">
      <h2>订阅我们的新闻简报</h2> <!-- Newsletter Heading -->
      <p>保持更新与最新的礼物，特别优惠，和更多。加入我们的通讯独家内容和折扣。</p> <!-- Newsletter Description -->
      <form class="newsletter-form">
        <input type="email" id="email" name="email" placeholder="您的邮件地址" required=""> <!-- Email Input Field -->
        <button type="submit" class="btn">Subscribe</button> <!-- Subscribe Button -->
      </form>
    </div>
  </section>  
  <!-- ==================== Newsletter Area (End) ==================== -->



  <!-- ==================== Footer Area (Start) ==================== -->
  <footer class="footer">

    <div class="box-container">

      <!-- == Gift Shop Description & Social Account Links == -->
      <div class="footer-item">
        
        <!-- Logo -->
        <a class="logo" href="">
          <img src="static/picture/Logo.png" alt="logo">
          <div class="logo-name">
            <h3>礼物商城</h3>
          </div>
        </a>
        <!-- Description -->
        <p>在我们的礼品店探索周到和独特的礼物。无论在什么场合，都要为你爱的人挑选一份完美的礼物。</p>
        <!-- Social Account Links -->
        <div class="social">
          <a href="#"><i class="fab fa-facebook-f"></i></a>
          <a href="#"><i class="fab fa-twitter"></i></a>
          <a href="#"><i class="fab fa-instagram"></i></a>
          <a href="#"><i class="fab fa-linkedin"></i></a>
        </div>

      </div>
      
      <!-- == Useful Links == -->
      <div class="footer-item">
        <h2>useful links</h2>
        <div class="info links pages">
          <div class="links-item">
            <p><i class="fas fa-square-full"></i><a href="index.html">首页</a></p>
            <p><i class="fas fa-square-full"></i><a href="About.html">关于我们</a></p>
            <p><i class="fas fa-square-full"></i><a href="Login.html">登录</a></p>
            <p><i class="fas fa-square-full"></i><a href="Register.html">注册</a></p>
          </div>
          <div class="links-item">
            <p><i class="fas fa-square-full"></i><a href="Categories.html">商品列表</a></p>
            <p><i class="fas fa-square-full"></i><a href="Product-Single.html">商品详情</a></p>
            <p><i class="fas fa-square-full"></i><a href="Cart.html">购物车</a></p>
            <p><i class="fas fa-square-full"></i><a href="Contact.html">联系我们</a></p>
          </div>
        </div>
      </div>

      <!-- == Product Categories == -->
      

      <!-- == Contact Information == -->
      <div class='footer-item'>
        <h2>contact info</h2> 
        <div class="info connect">
          <p><i class="fas fa-phone"></i><span>+111-222-333</span></p>
          <p><i class="fas fa-phone"></i><span>+123-456-789</span></p>
          <p><i class="fas fa-envelope"></i><span class="gmail">abc@gmail.com</span></p>
          <p><i class="fas fa-envelope"></i><span class="gmail">xyz@gmail.com</span></p>
          <p><i class="fas fa-map"></i><span>karachi, pakistan</span></p>
        </div>
      </div>

    </div>

  </footer>
  <!-- ==================== Footer Area (End) ==================== -->


 
  <!-- Jquery -->
  <script src="static/js/jquery.min.js"></script>

  <!-- Swiper (JS) -->
  <script src="static/js/swiper-bundle.min.js"></script>

  <!-- Magnific-Popup JS -->
  <script src="static/js/jquery.magnific-popup.min.js"></script>

  <!-- Isotope (JS) -->
  <script src="static/js/isotope.pkgd.min.js"></script>

  <!-- Custom Script Files -->
  <script src="static/js/script.js"></script> <!-- Custom JavaScript file with additional website functionality. -->
  <script src="static/js/nav-link-toggler.js"></script> <!-- Manages navigation link toggling (e.g., hamburger menu) for mobile devices -->
  <script src="static/js/home-slider.js"></script> <!-- Controls the dynamic Home Slider for showcasing content or images -->
  <script src="static/js/category.js"></script> <!-- Script file related to category functionality on the website -->
  <script src="static/js/counter-up.js"></script> <!-- Manages the "Counter Up" feature to animate numerical counting on the website. -->
  <script src="static/js/service-slider.js"></script> <!-- Script for controlling the service slider on the website -->
  <script src="static/js/product-tabs.js"></script> <!-- Script file for managing product tabs on the website -->
  <script src="static/js/product-slider.js"></script> <!-- Script for controlling product sliders or carousels on the website -->
  <script src="static/js/testi-slider.js"></script> <!-- Controls the interactive Testimonial Slider for showcasing customer testimonials. -->
  <script src="static/js/partner-slider.js"></script> <!-- Controls the interactive Partner Slider for showcasing business partners or sponsors. -->


</body>
</html>